<template>
    <div>
        <div class="tab tab_on">
            <span class="tab_left tab_on_left">课程审核</span>
            <button class="tab_right tab_on_right"@click="rouBack"><i class="big el-icon-arrow-left"></i>返回</button>
            <button class="tab_right tab_on_right" @click="Refresh"><i class="big el-icon-refresh-left"></i>刷新</button>
        </div>
        <div id="logbookTab">
            <div class="tab">
                <span class="tab_left"><i class="Icon el-icon-s-grid"></i> 课程审核数据列表</span>
            </div>
            <!-- 表格 -->
            <el-table :data="tableData3.slice((currentPage-1)*pageSize,currentPage*pageSize)" border style="width: 1125px">
                <el-table-column fixed prop="courseId" label="编号" width="100"></el-table-column>
                <!--                    表格中显示图片-->
                <el-table-column label="课程图片" width="100">
                    <template slot-scope="scope">
                        <el-image class="table-td-thumb" :src="scope.row.url"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="courseName" label="课程名称" width="130"></el-table-column>
                <el-table-column prop="courseIntro" label="备注" width="100"></el-table-column>
                <el-table-column prop="coursePrice" label="价格" width="70"></el-table-column>
                <el-table-column prop="courseStatus" label="状态" width="100">
                    <template  slot-scope="scope">
                        <el-switch v-model="scope.row.courseStatus" active-color="#13ce66" inactive-color="#ff4949"  :active-value="2" :inactive-value="3"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="排序" width="100"></el-table-column>
                <el-table-column prop="courseInfo" label="分类" width="100"></el-table-column>
                <el-table-column prop="saleNum" label="数量" width="100"></el-table-column>
                <el-table-column prop="courseCstatus" label="审核状态" width="100" :formatter="shzt">
                    <template slot-scope="scope" >
<!--                        &lt;!&ndash;                                <div v-text="scope.row.courseCstatus" ></div>&ndash;&gt;-->
                        {{scope.row.courseCstatus | shzt}}<br>
<!--                        <el-button @click="resultShow(scope.row,scope.row.courseId)" type="text" size="small">审核详情</el-button>-->
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row,scope.row.id)" type="text" size="small" class="result_class">审核</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <div class="block">
                <el-pagination align='center' @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :current-page="currentPage"
                               :page-sizes="[1,5,10,20]"
                               :page-size="pageSize"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total="tableData.length">
                </el-pagination>
            </div>
<!--            审核-->
            <el-dialog title="审核课程信息" :visible.sync="dialogVisibl" :before-close="handleClose">
                <div>
                    <el-form ref="form" :model="editObj" label-width="80px">
                        <el-input type="hidden" v-model="editObj.courseId"></el-input>
                        <el-input  type="hidden" v-model="editObj.time"></el-input>
                        <el-form-item label="课程名称">
                            <el-input v-model="editObj.courseName" :readonly="true"></el-input>
                        </el-form-item>
                        <el-form-item label="课程审核">
                            <el-radio v-model="radio" label="2">审核通过</el-radio>
                            <el-radio v-model="radio" label="3">审核未通过</el-radio>
                        </el-form-item>
                        <el-form-item label="反馈详情">
                            <el-input v-model="editObj.fkxq"></el-input>
                        </el-form-item>
                        <el-form-item label="审核人">
                            <el-input v-model="editObj.shr"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisible = false">取 消</el-button>
                            <el-button type="primary" @click="confirm">确 定</el-button>
			            </span>
            </el-dialog>
<!--            &lt;!&ndash;        审核详情页面&ndash;&gt;-->
<!--            <el-dialog title="审核详情" :visible.sync="show" :before-close="showClose">-->
<!--                <div >-->
<!--                    <el-table  border :data="tableData5" style="width: 100%">-->
<!--                        &lt;!&ndash; 对应字段写好&ndash;&gt;-->
<!--                        <el-table-column align="center" prop="implementDater" sortable label="审核时间" >-->
<!--                        </el-table-column>-->
<!--                        <el-table-column align="center" prop="implementId" label="审核人员" >-->
<!--                        </el-table-column>-->
<!--                        <el-table-column align="center" prop="result" label="审核结果" >-->
<!--                        </el-table-column>-->
<!--                        <el-table-column align="center" prop="remarks" label="反馈详情" >-->
<!--                        </el-table-column>-->
<!--                    </el-table>-->
<!--                </div>-->
<!--            </el-dialog>-->
        </div>
    </div>
</template>

<script>
    export default {
        inject:['reload'],
        name: "coursereview",
        data() {
            return {
                // //审核详情弹出层
                // show:false,
                // tableData4:[],
                // tableData5:[],
                //操作日志表格数据
                tableData: [],//可能会有变动
                tableData2:[],//过度数据用的
                tableData3:[],//不会变的所有商品数据
                //分页
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 5 ,// 每页的数据条数
                //审核的弹出层
                dialogVisibl:false,
                editObj: {
                    courseId:'',
                    courseName: '',
                    fkxq:'',
                    shr:'',
                    time:'',
                },
                radio:'',
            }
        },
        methods: {
            // //审核表格弹出层数据
            // resultData(){
            //     this.$http.get("/classify/audit",{
            //     }).then(res => {
            //         this.tableData4 = res.data;
            //     });
            // },
            // resultShow(row,id){
            //     this.tableData5=[];
            //     for (let i = 0; i<this.tableData4.length;i++){
            //         if(this.tableData4[i].courseId == id){
            //             this.tableData5.push(this.tableData4[i])
            //         }
            //     }
            //     this.show = !this.show
            // },
            // showClose(){
            //     this.show=false;
            // },
            //刷新页面
            Refresh() {
                this.reload();
            },
            //返回上一页
            rouBack() {
                this.$router.back()
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            //当前页改变时触发 跳转其他页
            handleCurrentChange(val) {
                this.currentPage = val;
            },
            //创建一个方法传入后台数据(表Table)
            tabledate(){
                this.$http.get("/classify/tablegetall",{
                }).then(res => {
                    this.tableData = res.data;
                    this.tableData3 = res.data;
                });
            },
            //表中格式化
            shzt(row){
                if (row== 1) {
                    return "已审核";
                } else if(row == 3){
                    return "未审核";
                }else if(row == 4){
                    return "审核中";
                }else if(row == 5){
                    return "审核失败";
                }else if(row == 6){
                    return "其他";
                }
            },
            //点击审核
            edit(item, id) {
                this.editObj = {
                    courseId:item.courseId,
                    courseName: item.courseName,

                };
                this.dialogVisibl = true;

                var date = new Date();
                var year = date.getFullYear();
                var month = (date.getMonth() + 1) < 10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
                var day = date.getDate()<10?'0'+date.getDate():date.getDate();
                var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
                var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
                var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
                this.editObj.time = year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            },
            //审核弹出层点击×号
            handleClose() {
                this.dialogVisibl = false;
            },
            //点击审核弹出层确定按钮
            confirm(){
                console.log(this.radio);
                let url = "/classify/kechengshenhe";
                var data = new URLSearchParams();
                data.append("courseStatus",this.radio);
                data.append('courseId',this.editObj.courseId);
                this.$http.post(url,data,{
                    heanders:{
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res =>{
                    console.log(res)
                });

                let aaa = "";
                if(this.radio==2){
                    aaa="审核通过"
                }else{
                    aaa="审核未通过"
                }
                console.log(aaa);

                let url1 = "/classify/shenhe";
                var data1 = new URLSearchParams();
                data1.append("courseId",this.editObj.courseId);
                data1.append("shr",this.editObj.shr);
                data1.append("fkxq",this.editObj.fkxq);
                data1.append("time",this.editObj.time);
                data1.append('shjg',aaa);
                this.$http.post(url1,data1,{
                    heanders:{
                        'C':'application/x-www-form-urlencoded'
                    }
                }).then(res =>{
                    console.log(res)
                });

                this.dialogVisibl = false;
                this.reload();
            },
        },
        filters:{
            shzt(row){
                if (row== 1) {
                    return "已审核";
                } else if(row == 3){
                    return "未审核";
                }else if(row == 4){
                    return "审核中";
                }else if(row == 5){
                    return "审核失败";
                }else if(row == 6){
                    return "其他";
                }
            },
        },
        created(){
            this.tabledate();
            //this.resultData();
        },
    }
</script>

<style scoped>
    .tab{
        height: 42px;
        background-color: #F3F3F3;
        border: 1px #E4E4E4 solid;
        line-height: 2.5;
    }
    .tab_on{
        margin: -20px 0px 12px -20px;
        padding: 0px 10px 4px 0px;
        width: 102%;
    }
    .tab_left{
        margin: 0px 0px 0px 9px;
        font-size: 13px;
    }
    .tab_on_left{
        color: #A2A2A2;
        font-size: 15px;
    }
    .tab_right{
        margin: 10px 15px 0px 0px;
        padding: 4px 13px;
        float: right;
        font-size: 12px;
        background: white;
        border: 2px #D8D8D8 solid;
    }
    .tab_on_right{
        padding: 4px 17px;
        font-size: 12px;
        color: #9A9A9A;
    }
</style>